import { DatePicker, List, message, Modal, Switch } from 'antd';
import 'antd/dist/antd.css';
import locale from 'antd/es/date-picker/locale/zh_CN';
// import 'antd/lib/input/style/index';     // 加这个启动有问题
// import 'antd/lib/date-picker/style/css'; // 没用，依然样式不全
import moment from 'moment';
import React from 'react';
import { FMT_YMD } from '../common/constant';
import Home from '../common/home';
import http from '../common/http';
import NoteItemInfo from './note-item-info';

const { confirm } = Modal

class NoteListForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            listSign: 1,
            showInfo: false,
            dateStr: moment().format(FMT_YMD),
            data: [
                {
                    typeId: 0, typeName: "xx", notes: [
                        { noteId: 0, noteTitle: "xxx", reviewId: 22, reviewFrequency: 3 }
                    ]
                }
            ]
        }
    }

    componentDidMount() {
        this.fetchNotReview()
        this.fetch()
    }
    handleSelectChange = (value) => {
        const sign = value ? 1 : 2
        this.setState({ listSign: sign }, this.fetch)
    }
    handleDateChange = (date, dateStr) => {
        this.setState({ dateStr }, this.fetch)
    }

    fetch = () => {
        this.setState({ loading: true, showInfo: false })
        http.get("/api/note/review/find-list", { params: { status: this.state.listSign, date: this.state.dateStr } })
            .then(res => {
                let data = res.data
                this.setState({ loading: false, data: data })
                if (data && data[0] && data[0].notes && data[0].notes[0]) {
                    // this.showInfo(data[0].notes[0])
                } else
                    this.fetchNotReview()
            })
    }
    showInfo = (note) => {
        this.curNote = note;
        this.subRef.refChange(note.noteId, this.state.listSign, note.reviewId)
        this.setState({ showInfo: true })
    }
    previous = () => {
        this.updateToReviewed(-1)
    }
    next = () => {
        this.updateToReviewed(+1)
    }
    showList = () => {
        this.setState({ showInfo: false })
        this.fetch(true)
    }
    updateToReviewed = (sign) => {
        let arr = []
        this.state.data.forEach(type => { arr = [...arr, ...type.notes] })
        let curIndex = arr.findIndex(note => note.noteId == this.curNote.noteId)
        if (sign > 0 && curIndex + 1 == arr.length) {
            message.info("已是最后一项")
            this.fetchNotReview()
            return
        } else if (sign < 0 && curIndex == 0) {
            message.info("已是第一项")
            return
        }
        let reviewNote = arr[curIndex + sign]
        this.showInfo(reviewNote)
    }
    fetchNotReview = () => {
        http.get("/api/note/review/find-not-review-recent-date")
            .then(res => {
                let date = res.data.map.recent_date
                if (date && date < this.state.dateStr) { // 返回的未复习日期小于页面选择的时期则提醒
                    confirm({
                        title: `【${date}】还有笔记待复习`,
                        content: "是否直接跳转",
                        onOk: () => {
                            this.setState({ dateStr: date }, this.fetch)
                        }
                    })
                }
            })
    }

    render() {
        const butStyle = { marginLeft: '10px' }
        const showInfo = this.state.showInfo
        return (
            <div>
                <Home homeHook={this.showList} />

                <DatePicker style={{ width: 120 }} value={moment(this.state.dateStr, FMT_YMD)}
                    allowClear={false}
                    format={FMT_YMD} locale={locale} onChange={this.handleDateChange} />
                <Switch style={butStyle} checkedChildren="待复习" unCheckedChildren="已复习"
                    defaultChecked={true} onChange={this.handleSelectChange} />

                <div style={{ marginTop: 20 }}>
                    <div style={{ display: showInfo ? "none" : "inline" }}>
                        {
                            this.state.data.map(type => {
                                return (
                                    <div key={"div-" + type.typeId}>
                                        <h3><b> {type.typeName} </b></h3>
                                        <List bordered
                                            loading={this.state.loading}
                                            dataSource={type.notes}
                                            locale={{ emptyText: '暂无数据' }}
                                            renderItem={item => (
                                                <List.Item>
                                                    <a href="#!" title="点击进入复习"
                                                        onClick={() => { this.showInfo(item) }}> {item.noteTitle} </a>
                                                </List.Item>
                                            )}
                                        />
                                    </div>
                                );
                            })
                        }
                    </div>
                    <div style={{ minHeight: 280, display: showInfo ? "inline" : "none" }}>
                        <NoteItemInfo ref={(ref) => { this.subRef = ref }}
                            previous={this.previous} next={this.next} showList={this.showList} />
                    </div>
                </div >
            </div >
        )
    }
}

export default NoteListForm